<template>
  <div class="home-chat">
    <!-- 这里是主页，聊天页 -->
    <!-- 标题文字 -->
    <div class="title-text">
      <h1>基于DAO&LLM的C环设计仿真平台</h1>
    </div>

    <el-image class="bg-img" src="/background-image.jpg"></el-image>

    <!-- 单位名称 -->
    <div class="organization-info">
      <div class="org-item">工业智能与系统优化国家级前沿科学中心</div>
      <div class="org-item">智能工业数据解析与优化教育部重点实验室</div>
      <div class="org-item">东北大学人工智能与大数据研究院</div>
    </div>

    <!-- <RadioGrop @chose-model="handleChoseModel"></RadioGrop> -->
    <!-- 输入框布局 -->
    <!-- <div class="input-div">
      <ChatInput @on-send="onSend"></ChatInput>
    </div> -->
    <!-- <div class="radius" :style="{ borderRadius: `var(--el-border-radius-base)` }" /> -->
  </div>
</template>

<script setup>

import { useAuthStore } from "@/stores/auth";
import { useSessionStore } from "@/stores/session";
import { useSessionsStore } from "@/stores/sessions";
import { useRouter } from "vue-router";



const authStore = useAuthStore();
const sessionStore = useSessionStore();
const sessionsStore = useSessionsStore();
const router = useRouter();
let model = {};
const handleChoseModel = (selectedModel) => {
  model = selectedModel;
}
const onSend = (msg) => {

}

</script>

<style lang="scss" scoped>
.home-chat {
  display: flex;
  flex-direction: column;
  align-items: center;
  // row-gap: 0.5rem;
  width: min(60vw, 100%);
  gap: 1rem;

  // 标题样式
  .title-text {
    text-align: center;
    margin-top: 1rem;

    h1 {
      font-size: 1.8rem;
      font-weight: bold;
      color: #2c3e50;
      margin: 0;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
      letter-spacing: 1px;
    }
  }

  // background-image: url("../../../../public/background-image.jpg");
  .bg-img {
    height: 65vh;
    width: 100%;
    border-radius: 0px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    object-fit: cover;
  }

  // 单位信息样式
  .organization-info {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;

    .org-item {
      font-size: 0.85rem;
      color: #1a1a1a;
      font-weight: 600;
      text-align: center;
      padding: 0.7rem 1.2rem;
      background: #ffffff;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      border: 2px solid #e5e7eb;
      transition: all 0.3s ease;
      min-width: 180px;
      max-width: 250px;
      line-height: 1.3;

      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        border-color: #3b82f6;
      }
    }
  }

  .logo-img {
    height: 12rem;
    width: 13rem;
  }

  .input-div {
    width: 100%;
    // border:1px solid #cfd3d3;
    // border-radius: 25px;
    // display: flex;
    // width: 48vw;
    // align-items: center;
    // justify-content: space-around;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .home-chat {
    gap: 0.8rem;

    .title-text {
      margin-top: 0.5rem;

      h1 {
        font-size: 1.4rem;
        letter-spacing: 0.5px;
      }
    }

    .bg-img {
      height: 60vh;
    }

    .organization-info {
      flex-direction: column;
      gap: 0.8rem;
      margin-bottom: 0.5rem;

      .org-item {
        font-size: 0.8rem;
        min-width: 200px;
        max-width: 280px;
        padding: 0.6rem 1rem;
      }
    }
  }
}
</style>
